/**
 * Vue监视属性
 * 1. 当被监视的属性变化时,回调函数自动调用,进行相关操作
 * 2. 监视的属性必须存在,才能监视
 * 3. 监视的两种写法
 *   - new Vue时传入watch配置
 *   - 通过vm.$watch监视
 * 4. 深度监视
 *  - Vue中的watch默认不监测对象内部值的改变(一层)
 *  - 配置deep:true 属性可以监测对象内部值的改变
 *  - 备注:
 *      - Vue自身可以监测到对象内部值的改变,但是VUe提供的watch默认不可以.
 *      - 使用watch时根据数据的自身结构,决定是否采用深度监视.
 */
// 阻止Vue在启动时生成生产提示
Vue.config.productionTip = false;
new Vue({
	el: "#root",// 用于指定当前Vue实例在为哪个容器服务,通常为css选择器 也可以写为 document.getElementById("root")
	data: {// data用于存储数据,数据供el指定的容器使用,
		isHot: true,
		info: "很热",
		numbers: {
			a: 1,
			b: 2
		}
	},
	watch: {
		isHot: {
			immediate: true,// 初始化时让handler执行一下
			handler(n, o) {
				console.log(n, o)
			}
		},
		numbers: {
			// 监视多级结构中某个属性的变化
			deep: true,
			handler(n, o) {
				console.log({n, o})
			}
		}
		// 'numbers.a': {
		// 	handler(n, o) {
		// 		console.log({n, o})
		// 	}
		// }
	}
});
